<template>
  <div class="manage-feedback">
    <div class="manage-header">
      <h2>反馈信息管理</h2>
      <div class="manage-search">
        <el-input
          placeholder="请输入关键字搜索"
          v-model="searchKeyword"
          class="search-input"
          @keyup.enter.native="searchFeedback"
        >
          <el-button slot="append" icon="el-icon-search" @click="searchFeedback"></el-button>
        </el-input>
      </div>
    </div>

    <el-table
      :data="feedbackList"
      border
      style="width: 100%"
      v-loading="loading"
    >
      <el-table-column label="ID" width="80">
        <template slot-scope="scope">
          <div>{{ scope.row.feedbackID }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="用户账户名"
        width="150"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.feedbackUser }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="反馈类型"
        width="120"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.feedbackType }}</div>
        </template>
      </el-table-column>
      <el-table-column label="反馈内容">
        <template slot-scope="scope">
          <div class="feedback-content">{{ scope.row.feedbackText }}</div>
        </template>
      </el-table-column>
      <el-table-column label="提交时间" width="180">
        <template slot-scope="scope">
          <div>{{ scope.row.feedbackDate }}</div>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
const axios = require('axios')
const ele = require('element-ui')

export default {
  name: 'ManageFeedback',
  data() {
    return {
      feedbackList: [],
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      searchKeyword: ''
    }
  },
  created() {
    // 检查用户是否为管理员
    if (window.localStorage.getItem('userType') !== 'admin') {
      ele.Message.error('您没有权限访问此页面')
      this.$router.push('/')
      return
    }

    this.getFeedbackList()
  },
  methods: {
    getFeedbackList() {
      this.loading = true
      let _this = this

      axios({
        method: 'get',
        url: 'http://localhost:8080/getFeedbackList',
        params: {
          page: this.currentPage,
          size: this.pageSize,
          keyword: this.searchKeyword
        }
      }).then(function(response) {
        console.log('接口返回数据:', response.data)
        if (response.data.status === "success") {
          _this.feedbackList = response.data.dataList
          _this.total = response.data.total
        } else {
          ele.Message.error('获取反馈列表失败')
        }
        _this.loading = false
      }).catch(function(error) {
        console.log(error)
        ele.Message.error('网络错误，请稍后重试')
        _this.loading = false
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getFeedbackList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getFeedbackList()
    },
    searchFeedback() {
      this.currentPage = 1
      this.getFeedbackList()
    }
  }
}
</script>

<style scoped>
.manage-feedback {
  padding: 20px;
}

.manage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.manage-header h2 {
  margin: 0;
  font-size: 20px;
  color: #409EFF;
}

.manage-search {
  display: flex;
  align-items: center;
}

.search-input {
  width: 300px;
}

.feedback-content {
  max-height: 100px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}
</style>
